
        {include file="public/header"}
        <style>
            .align-center{              
                margin:-15px 20px -15px 0;
            }
            .set-read-btn { display: none; }
            .info-item:hover .set-read-btn { display:block; }
            .real-notify { height:60px; cursor:pointer; text-align: center; margin-top:auto; line-height:60px; font-size:16px; border-top:1px solid #DCDFE6; }
        </style>
        {include file="public/style"}
        <div>
            <div>               
                <el-menu :default-active="0" class="el-menu-demo" mode="horizontal"  active-text-color="#1989fa" @select="handleSelect">
                   
                    <el-menu-item style="font-size: 25px; color:#1989fa"  @click="goHome">老I-erp后台</el-menu-item>

                        <div style="display:flex; justify-content: flex-end;" >   
                            <el-menu-item-group  style="width: 80px;">
                                 <el-badge  :value="notReadCount" class="item" style="text-align: center;"  @click.native="SystemSource">系统消息</el-badge>
                            </el-menu-item-group>
                            <el-submenu index="4" style="width: 160px;" >
                                <template slot="title" ><i class="el-icon-user-solid" style="color: #1989fa;" ></i>{$nickname}</template>
                                <el-menu-item  @click="ChangePass">修改密码</el-menu-item>
                                <el-menu-item  @click="logout">退出登录</el-menu-item>
                            </el-submenu>
                        </div>
                    </el-menu>
             
            </div>
            <div style="display:flex;">
                <div style="width:200px;">
                    <el-menu default-active="2" class="el-menu-vertical-demo"   @open="handleOpen" @close="handleClose"  @select="MuenSelect"
                        style="height: calc(98vh - 61px);flex-shrink: 0;width: 200px;">
                    
                        <el-submenu :index="index" v-for="(item, index) in menu_list">                         
                            <template slot="title">
                                <i :class="item.icon"></i>
                                <span>   {{item.title}}</span>
                            </template>      
                            <el-menu-item v-for="items in item.children" :index="items.url">  {{items.title}}</el-menu-item>     
                            <!-- <el-menu-item-group title="分组2">
                                <el-menu-item index="/admin/Stroages/storageslist">仓库</el-menu-item>
                            </el-menu-item-group> -->
                            <!-- <el-submenu index="1-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="1-4-1">22</el-menu-item>
                            </el-submenu> -->
                        </el-submenu>
                    </el-menu>
                </div>
                <div class="iframe-container" style="flex:1" >
                    <iframe :src="src" scrolling="auto" frameborder="0" class="frame" style="width: 90vw;height: 90vh;" :onload="onloaded()">
                    </iframe>
                </div>
            </div>
        </div>

        <!-- 修改密码弹窗 -->
        <el-dialog title="修改密码弹窗" :visible.sync="UpdatePassVisible"  width="550px" :close-on-click-modal="false" >
            <el-form :model="addpassForm"  label-width ="100px" size="medium" label-position="left"  :rules="rules" ref="refaddForm" >
                <el-form-item prop="old_password" label="旧密码">
                    <el-input v-model="addpassForm.old_password" autocomplete="off" placeholder="请填写旧密码"></el-input>
                </el-form-item>
                <el-form-item prop="new_password" label="新密码">
                    <el-input v-model="addpassForm.new_password" autocomplete="off" placeholder="请填写新密码"></el-input>
                </el-form-item>
       
                <el-button @click="UpdatePassVisible = false">取 消</el-button>
                <el-button type="primary" @click="UpdatePass()" >确 定</el-button>
            <el-form >
        </el-dialog>
  
         <!-- 消息的弹窗 -->
        <el-drawer  title="系统消息"  :visible.sync="notifyVisible" direction="rtl"   size="40%"  :close-on-click-modal="true" :show-close="false">
             <el-divider></el-divider>             
                <div  class="flex justify-between align-center ">  
                    <div class="flex justify-between" style="cursor:pointer">
                        <el-checkbox  class="ml-20 mt-6" v-model="shortParams.is_read" @change="">只看未读</el-checkbox>   
                    </div>
                    <div class="flex justify-between" style="cursor:pointer">
                        <el-button size="small" @click="" style="margin-right: 20px;">全部标为已读</el-button>                  
                    </div>
               </div>
            <el-divider></el-divider>  
            <div style="flex: 1">
                <div class="info-list" style="overflow-y:scroll" >
                    <template >
                        <div class="info-item px-12 py-12"  >
                            <div class="flex align-center" style="font-size: 13px;">
                                <el-tag size="small" type="warning">订单异常</el-tag>
                                <span class="ml-12 fs-16" style="font-size: 13px;">订单号:2552921965,系统后台已被客户取消,请及时处理</span>
                                <p class="ml-4">2024-05-20 10:20:00</p>
                                <div style="margin-left: auto;position:relative" class="set-read-wrapper">
                                    <el-link type="primary" class="set-read-btn" @click="">标为已读</el-link>
                                    <div class="red-dot"></div>
                                </div>
                            </div>                        
                            <div class="mt-8 mb-12">
                                <el-link :underline="false" :href="'/Admin/WarningRules/warning_product?name=we'" target="_self" type="primary" >订单号:2552921965,系统后台已被客户取消,请及时处理</el-link>
                                <div>2024-05-20 10:20:00</div>
                            </div>
                                <el-divider></el-divider>
                            </div>
                        </div>
                           <div class="info-item px-12 py-12"  >
                            <div class="flex align-center" style="font-size: 13px;">
                                <el-tag size="small" type="success">新的订单</el-tag>
                                <span class="ml-12 fs-16" style="font-size: 13px;">恭喜恭喜，新增订单号:2552921965,请及时发货哦</span>
                                <p class="ml-4">2024-05-20 10:20:00</p>
                                <div style="margin-left: auto;position:relative" class="set-read-wrapper">
                                    <el-link type="primary" class="set-read-btn" @click="">标为已读</el-link>
                                    <div class="red-dot"></div>
                                </div>
                            </div>                        
                            <div class="mt-8 mb-12">
                                <el-link :underline="false" :href="'/Admin/WarningRules/warning_product?name=we'" target="_self" type="primary" >恭喜恭喜，新增订单号:2552921965,请及时发货哦</el-link>
                                <div>2024-05-20 10:20:00</div>
                            </div>
                                <el-divider></el-divider>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div class="flex justify-center align-center" style="height:100%;">
                            暂无数据
                        </div>
                    </template>
                </div>
            </div>
            <div class="real-notify" @click="">查看更多通知</div>
        </el-drawer>  
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    src: '/admin/index/home',   
                    activeIndex:1,  
                  
                    nickname:"{$nickname}",
                    menu_list:[],
                    UpdatePassVisible: false,//修改密码弹窗
                    addpassForm: {
                            token:'',
                            old_password: '',
                            new_password: '',                         
                    },
                    rules: {
                        old_password: [
                            { required: true, message: '请填写旧密码', trigger: 'blur' },
                           
                        ],
                        new_password: [
                            { required: true, message: '请填写新密码', trigger: 'blur' },
                            { min:5, max: 30, message: '长度在 5到30 个字符', trigger: 'blur' }
                        ]
                    },
                    isFold:false,//系统消息
                    notifyVisible:false,
                    title:'系统消息',
                    notReadCount:1,//消息条数
                    shortParams:{
                        is_read:'',
                    },
                    warningList:{},
                }
            },
            mounted(){        
                this.getDatalist()
                 this.startPolling();//消息
            },
              beforeDestroy() {
                clearInterval(this.timer); // 清除定时器
            },
            methods: {
                handleSelect(e) {
                    console.log(e);
                  
                },
                MuenSelect(e){
                    console.log(e);
                    this.src=e 
                },

                handleOpen(e, keyPath) {                  
                },
                handleClose(e) {
                  
                 },
                onloaded: function (d) {
                    if (this.loading) {
                        this.loading.close()
                    }
                },
                //退出登录
                async logout(){
                    const res = await axios.get('../index/login/logout' )
                    console.log(res);
                    if (res.status !== 1){
                         return this.$message.error(res.info);
                    }
                    window.location.href = '../index/login/login';
                },
                //修改密码
                ChangePass(){
                  this.UpdatePassVisible = true;
                },
                async getDatalist() {
                    const res = await axios.post('/admin/index/index')
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }                  
                    this.menu_list = res.info
                    console.log(this.menu_list)  

                },
            
                //修改密码
                 async UpdatePass(){
                    this.$refs.refaddForm.validate(async valid => {
                        if (!valid) {
                            return
                        }
                        const res = await axios.post('./Index/login/changePassword', {params: this.addpassForm})
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }
                        this.$message.success(res.info);
                        this.UpdatePassVisible = false;
                    })
                },
                goHome(){               
                    this.src = '/admin/index/home'
                },
                //弹出系统消息
                SystemSource(){
                    this.notifyVisible=true 
                },
                 startPolling() {
                    this.timer = setInterval(() => {                    
                        // this.$notify({
                        //     title: '你有一个未读的消息',
                        //     message: '你有一个订单异常,请尽快处理',            
                        //     type: 'warning',
                        //     offset: 100
                        // });
                         
                    }, 1800)
                },


            }
        });
    </script>
</body>

</html>